<template>
    <div class="tech-member-info" @click="gotoDetail">
        <Avatar class="member-avatar" size="large" :src="memberInfo.headPic" :haveVip="isVip" alt="member avatar" />
        <div class="member-detail" v-if="memberInfo.nickName">
            <div class="member-name">{{memberInfo.nickName}}</div>
            <div class="member-control">
                <div v-if="memberInfo.mobile" class="member-mobile">{{memberInfo.mobile}}</div>
                <div v-else class="bind-phone-tip">
                    <TechIcon name="phone-gray" />绑定手机
                </div>
            </div>
        </div>
        <div class="member-detail empty-user" v-else @click.stop="updateMemberInfo">
            <div class="member-name">匿名食客</div>
            <div class="member-control">
                点击更新用户信息
                <TechIcon name="arrow" />
            </div>
        </div>
        <!-- <div class="member-info-item" @click.stop="couponsAction">
            <div class="member-info-title">{{(memberInfo.coupons || []).length}}</div>
            <div class="name">优惠券</div>
        </div> -->
        <!-- <div v-if="type === 'member'" class="member-info-item member-qrcode-btn"  @click.stop="rightClick">
            <TechIcon name="member-qrcode" :size="30" />
            <div class="name">会员码</div>
        </div>
        <div v-else class="member-info-item member-center-btn" @click.stop="rightClick">
            <TechIcon name="vip" />会员中心
        </div> -->
    </div>
</template>

<script>
import { Tag } from 'vant';
import Avatar from '../base/Avatar';
import TechIcon from '../base/TechIcon';
export default {
    name: 'MemberInfo',
    components: {
        Tag,
        Avatar,
        TechIcon,
    },
    props: {
        type: {
            type: String,
            default: 'member', // member other
        },
        memberInfo: {
            type: Object,
            default() {
                return {
                    headPic: '',
                    nickName: '',
                    mobile: '',
                    groups: [],
                };
            },
        },
    },
    computed: {
        isVip() {
            const { groups } = this.$props.memberInfo;
            return groups ? groups.length > 0 : false;
        },
    },
    methods: {
        gotoDetail() {
            this.$emit('detailAction');
        },
        rightClick() {
            this.$emit('rightAction');
        },
        couponsAction() {
            this.$emit('couponsAction');
        },
        updateMemberInfo() {
            this.$emit('updateMemberInfo');
        },
    },
};
</script>

<style lang="less">
.tech-member-info {
    .flex-row-center();
    .p(@gap-md);
    background-color: @white;
    .member-avatar {
        .m-r(@gap-md);
    }
    .member-info-item {
        .flex-column();
        align-items: center;
        justify-content: space-between;
        color: @gray-darker;
        min-width: 80px;
        height: 50px;
        .font-size-sm();
        .member-info-title {
            font-size: @font-size-md;
            color: @gray-444;
            .flex-column-center();
            .m-b(@gap-sm);
        }
    }
    .member-detail {
        flex: 1;
        height: 60px;
        .flex-column();
        justify-content: center;
        &.empty-user {
            .member-control {
                .font-size-sm();
                color: @gray-darker;
            }
        }
        .member-name {
            .font-size-md();
            font-weight: @font-weight-bold;
            .m-b(@gap-sm);
        }
        .member-control {
            .member-mobile {
                .font-size-sm();
                color: @gray-dark;
            }
            .bind-phone-tip {
                width: 80px;
                height: 22px;
                border-radius: 11px;
                .font-size-sm();
                border: @border;
                border-color: @gray-dark;
                color: @gray-444;
                .flex-row-center();
                .tech-icon-phone-gray {
                    .m-r(3px);
                }
            }
        }
    }
    .van-icon-arrow {
        color: @gray;
    }
    .member-qrcode-btn {
        // .flex-column-center();
        .font-size-sm();
        color: @gray-darker;
        .m-r(-@gap-md);
        min-width: 80px;
    }
    .member-center-btn {
        color: @card-color;
        .linear-right(@member-card-start-color, @member-card-end-color);
        .flex-row-center();
        .p-h(12);
        height: 30px;
        border-radius: @gap-md;
        .font-size-sm();
        font-weight: @font-weight-bold;
        .tech-icon-vip {
            .m-r(@gap-sm);
        }
    }
}
</style>
